<script>
  import $ from 'dfish-widget'
  import Widget from '../Widget.vue'
  import form from '../widget.form.js'
  import input from '../widget.form.input.js'

  export default {
    mixins: [Widget],
    data() {
      return {
        name: 'Jigsaw',
        remark: '滑块验证表单',
        extends: [form, input],
        deprecate: 'validate-default',
        attrs: [
          {
            name: 'big',
            type: 'Object',
            remark: '大图。格式: <var>{src, width, height}</var>',
            option: '',
            default: ''
          }, 
          {
            name: 'small',
            type: 'Object',
            remark: '小图。格式: <var>{src, width, height}</var>',
            option: '',
            default: ''
          },
          {
            name: 'min-value',
            remark: '最小值',
            type: 'Number',
            default: '0'
          },
          {
            name: 'max-value',
            remark: '最大值',
            type: 'Number',
            default: '100'
          },
          
        ],
        events: [{
          name: 'drop',
          remark: '释放拖动时触发',
          option: '(event: Event, value: String)',
          default: ''
        }, {
          name: 'click:refresh',
          remark: '点击刷新时触发',
          option: '(event: Event)',
          default: ''
        }],
        methods: [{
          name: 'success(text)',
          remark: '验证成功时调用',
          option: '<var>text</var>: String 显示内容',
          default: ''
        }, {
          name: 'error(text, [timeout], [fn])',
          remark: '验证失败时调用',
          option: '<div><var>text</var>: String 显示内容</div><div><var>timeout</var>: Number 可选，锁定倒计时</div><div><var>fn</var>: Function 可选，锁定结束后触发</div>',
          default: ''
        }],
				examples: [{
				  remark: '拖动滑块验证',
				  type: 'html',
					view: true,
				  code: `
				    <template>
				      <w-jigsaw ref="jigsaw" name="auth" :big="big" :small="small" @drop="drop" @click:refresh="refresh"></w-jigsaw>
				    </template>
				    
				    <${'script'}>
				      import $ from '../../dfish.js'
				    
				      export default {
				        data() {
				          return {
				            big: null,
				            small: null,
				          }
				        },
				        methods: {
				          async drop(e, value) {
				            let result = await this.check(value)
				            if (result == 'success') {
				              this.$refs.jigsaw.success('验证成功')
				            } else if (result == 'error') {
				              this.$refs.jigsaw.error('验证失败，请重试')
				            } else if (result == 'lock') {
				              this.$refs.jigsaw.error('验证次数过多，请稍后再试', 5000, this.refresh)
				            }
				          },
				          check(value) {
				            // value值范围0-100，这里是模拟返回值，实际项目中应该去后台请求是否成功
				            return new Promise(resolve => {
				              if (value < 30) {
				                resolve('lock')
				              } else if (value < 60) {
				                resolve('error')
				              } else {
				                resolve('success')
				              }
				            })
				          },
				          refresh() {
				            this.big = {src: 'img/auth/auth-big.jpg', width: 480, height: 240}
				            this.small = {src: 'img/auth/auth-small.png', width: 91, height: 240}
				          }
				        },
				        mounted() {
				          //width 和 height是图片的原始高度和宽度
				          this.big = {src: 'img/auth/E621-B.png', width: 400, height: 200}
				          this.small = {src: 'img/auth/E621-S.png', width: 64, height: 200}
				        }
				      }
				    </${'script'}>
				    `,
						comp: {
							data() {
							  return {
							    big: null,
							    small: null,
							  }
							},
							methods: {
							  async drop(e, value) {
							    let result = await this.check(value)
							    if (result == 'success') {
							      this.$refs.jigsaw.success('验证成功')
							    } else if (result == 'error') {
							      this.$refs.jigsaw.error('验证失败，请重试')
							    } else if (result == 'lock') {
							      this.$refs.jigsaw.error('验证次数过多，请稍后再试', 5000, this.refresh)
							    }
							  },
							  check(value) {
							    // value值范围0-100，这里是模拟返回值，实际项目中应该去后台请求是否成功
							    return new Promise(resolve => {
							      if (value < 30) {
							        resolve('lock')
							      } else if (value < 60) {
							        resolve('error')
							      } else {
							        resolve('success')
							      }
							    })
							  },
							  refresh() {
							    this.big = {src: 'img/jigsaw/auth-big.jpg', width: 480, height: 240}
							    this.small = {src: 'img/jigsaw/auth-small.png', width: 91, height: 240}
							  }
							},
							mounted() {
							  //width 和 height是图片的原始高度和宽度
							  this.big = {src: 'img/jigsaw/E621-B.png', width: 400, height: 200}
							  this.small = {src: 'img/jigsaw/E621-S.png', width: 64, height: 200}
							}
						}
				}]
      }
    }
  }
</script>

<style>
</style>
